<html>
<head>
<title>Gmap Offline</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />  
<link rel="stylesheet" href="css/checkbox.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="css/jquery.svg.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="jquery-plugin/jquery-1.7.1.js"></script>
<script src="jquery-plugin/jquery.contextMenu.js" type="text/javascript"></script>
<script src="jquery-plugin/jquery.ui.core.js"></script>
<script src="jquery-plugin/jquery.ui.widget.js"></script>
<script src="jquery-plugin/jquery.ui.mouse.js"></script>
<script src="jquery-plugin/jquery.ui.draggable.js"></script>
<script src="jquery-plugin/jquery.svg.js"></script>
<script src="jquery-plugin/jquery.svg.min.js"></script>
<script src="jquery-plugin/jquery.svg.pack.js"></script>
<script src="jquery-plugin/jquery.drawinglibrary.js"></script>
<script src="process_map.js"></script>
<script src="dijkstra.js"></script>
<script type="text/javascript">

$(document).ready(function() { 

		setHeight_Page();
		init_control();
		var node_1_value = false;
		var node_2_value = false;
		var node_1 = null;
		var node_2 = null;
		var stt_down = false;
		var type_tab = 1;
		var stt_input_list_point = false;
		array_point = new Array(100);
		var count_point = 0;
		
		wd_width = $("#tileContainer").width();
		wd_height = $("#tileContainer").height();
		x_default = 13009;
		y_default = 7212;
		left_show_default = Math.round(wd_width/2) - 256/2;
		top_show_default = Math.round(wd_height/2) - 256/2;

		position_div = $("#tileContainer").position();
		position_div_left_origin = -position_div.left;
		position_div_top_origin = -position_div.top;
		position_div_left_old = -position_div.left;
		position_div_top_old = -position_div.top;
		
		array_info_tiles = init_map(x_default, y_default, left_show_default, top_show_default);
		
		$(function() {
			$( "#dragContainer" ).draggable();
		});

		// zoom in
		$("#dragContainer").dblclick(function(event){
			var lastID;
			var tile_x, tile_y;
			var delta_left_convert = $("#dragContainer").position().left - position_div_left_origin;
			var delta_top_convert = $("#dragContainer").position().top - position_div_top_origin;
			var delta_left_click = (event.pageX - delta_left_convert) - left_show_default;  
			var delta_top_click = (event.pageY - delta_top_convert) - top_show_default;
			tile_x = x_default + Math.floor(delta_left_click/256);
			tile_y = y_default + Math.floor(delta_top_click/256);
			var x_pixel, y_pixel;
			if(delta_left_click < 0) {
				x_pixel = tile_x * 256 + (256 - Math.abs(delta_left_click%256));	
			} else {
				x_pixel = tile_x * 256 + Math.abs(delta_left_click%256);
			}
			if(delta_top_click < 0) {
				y_pixel = tile_y * 256 + (256 - Math.abs(delta_top_click%256));	
			} else {
				y_pixel = tile_y * 256 + Math.abs(delta_top_click%256);
			}	
			var test_convert_pixel_to_latlng = fromPixelToLatLng(x_pixel, y_pixel, zoom_level);
			// zoom in
			if(type_tab == 2 || type_tab == 3) {
				/*if(node_1_value == false) {					
					var delta_left_convert = $("#dragContainer").position().left - position_div_left_origin;
					var delta_top_convert = $("#dragContainer").position().top - position_div_top_origin;
					node_1 = new Pixel((event.pageX - delta_left_convert), (event.pageY - delta_top_convert));
				}
				if(node_2_value == false && node_1_value) {					
					var delta_left_convert = $("#dragContainer").position().left - position_div_left_origin;
					var delta_top_convert = $("#dragContainer").position().top - position_div_top_origin;
					node_2 = new Pixel((event.pageX - delta_left_convert), (event.pageY - delta_top_convert));
				}
				if(node_1 != null && node_2 != null) {
					drawPath(node_1.x, node_1.y, node_2.x, node_2.y);
					node_1_value = false;
					node_2_value = false;
					node_1 = null;
					node_2 = null;
				}*/
				if(type_tab == 2) {
					if(stt_click_browse_startnode) {
						var lat = round_f(test_convert_pixel_to_latlng.lat, 6);
						var lng = round_f(test_convert_pixel_to_latlng.lng, 6);
						current_start_point = new LatLng(lat, lng);
						$("#txt_start_node").val(lat + ", " + lng);
						stt_click_browse_startnode = false;
						$("#btn_start_node").val('Browse');
						insert_img_node(0, lat, lng, zoom_level);
					}
					if(stt_click_browse_endnode) {
						var lat = round_f(test_convert_pixel_to_latlng.lat, 6);
						var lng = round_f(test_convert_pixel_to_latlng.lng, 6);
						current_end_point = new LatLng(lat, lng);
						$("#txt_end_node").val(lat + ", " + lng);
						stt_click_browse_endnode = false;
						$("#btn_end_node").val('Browse');
						insert_img_node(1, lat, lng, zoom_level);
					}					
					$("#longitude_locality").val(round_f(test_convert_pixel_to_latlng.lng, 6));					
				} else {
					var node_Pixel_Image = fromLatLngToPixel(test_convert_pixel_to_latlng.lat, test_convert_pixel_to_latlng.lng, zoom_level);
					
					// gtri pixel tinh theo he quy chieu man hinh cua diem dau diem cuoi
					var node_Pixel_Window = convertPixelImageToPixelWindow(node_Pixel_Image.x, node_Pixel_Image.y);
					
					var c = InPolygon(node_Pixel_Window, boundary_global, boundary_global.length);
					alert(c);
					//$("#latitude_node").val(round_f(test_convert_pixel_to_latlng.lat, 6));
					//$("#longitude_node").val(round_f(test_convert_pixel_to_latlng.lng, 6));
				}
					
				if(node_1_value == false && node_1 != null)	node_1_value = true;
			} else {
				if(stt_input_list_point) {					
					$.ajax({
						type: "POST",
						url: "utilities_db.php",
						dataType: 'json',
						data: "function_name=getLastID&table_input=node",
						success: function(data) {
							var temp = null;
							if($("#list_point").val() != null) {
								temp = parseInt($("#list_point").val()) + 1;
							} else {
								temp = parseInt(data.id) + 1;
							}
							var option_text = temp + "(" + round_f(test_convert_pixel_to_latlng.lat, 6) + ", " + round_f(test_convert_pixel_to_latlng.lng, 6) + ")";
							var value = temp;
							$("#list_point").append(new Option(option_text, value, true, true));						
						}
					});	
					setTimeout(function() {
						var p = new point($("#list_point").val(), round_f(test_convert_pixel_to_latlng.lat, 6), round_f(test_convert_pixel_to_latlng.lng, 6											), '');
						array_point[count_point] = p;	
						count_point++;
					},100);	
				} else {
					if(zoom_level > 0) {
						zoom_map(event, true);
					}
				}
			}
		});

		// zoom out
		$('#dragContainer').unbind('mousedown').mousedown(function(event){
			var rightclick = (event.which) ? (event.which == 3) : (event.button == 2);
			var t = $(this);
			if (rightclick) {
			    if (t.data('rightclicked')) {
			   	   if(zoom_level < 17) {
			   		   zoom_map(event, false);
			   	   }
			    } else {
			       t.data('rightclicked',true);
			       setTimeout((function(t){ return function(){ t.data
			       ('rightclicked',false); } })(t), 300);
			    };
			};
		});
		$("#dragContainer").mousedown(function(event){
			if(event.which == 1) {
				$("#tileContainer").css('cursor', 'url(closedhand_8_8.cur), move');
			}			
		}).mouseup(function(event){
			$("#tileContainer").css("cursor", "auto");
		});
		
		callback();
		
		// Xu ly su kien menu bar
		// When a link is clicked  
		$("a.tab").click(function() {  
			
			// switch all tabs off  
			$(".active").removeClass("active");  
	  
			// switch this tab on  
			$(this).addClass("active");  
	  
			// slide all elements with the class 'content' up  
			$(".content").slideUp();  
	  
			// Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
			var content_show = $(this).attr("title");
			if(content_show == "content_1") {
				type_tab = 1;
			} else if(content_show == "content_2") {
				type_tab = 2;
			} else if(content_show == "content_3"){
				type_tab = 3;
			} else if(content_show == "content_4") {
				type_tab = 4;
			}
			$("#"+content_show).slideDown();  
	  
		});  
		
		$("#btn_browse_wayset").click(function() {
			var height = 100 + 10 * 20;
			window.open("browse_segment.php?update=" + type_tab, "Window", "width=320,height=" + height + ",scrollbars=yes");					  
			//alert("Da click!");
		});
		
		$("#btn_update_wayset").click(function() {
			var height = 100 + 10 * 20;
			window.open("browse_segment.php?update=" + type_tab, "Window", "width=320,height=" + height + ",scrollbars=yes");					  
			//alert("Da click!");
		});
		
		$("#btn_insert_locality").click(function() {
			var function_name = "insert_locality";
			var city_id = $("#city").val();
			var district_id = $("#district").val();
			if(district_id == " ") {
				district_id = null;
			}
			var ward_id = $("#ward").val();
			if(ward_id == " ") {
				ward_id = null;
			}
			var locality_level = $("#locality_level").val();
			var name_locality = $("#name_locality").val();
			var latitude = $("#latitude_locality").val();
			var longitude = $("#longitude_locality").val();
			$.ajax({
				type: "POST",
				url: "insert_db.php",
			  	data: "function_name=" + function_name + "&city_id=" + city_id + "&district_id=" + district_id + "&ward_id=" + ward_id +
			  		  "&locality_lv=" + locality_level + "&name_locality=" + name_locality + "&lat=" + latitude + "&lng=" + longitude
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");
				} else {
					alert("lỗi");
				}			  	
			});		
		});
		$("#btn_insert_segment").click(function() {
			/*var function_name_segment = "insert_segment";
			var administrative_id = $("#road_street_id").val();
			var name_segment = $("#name_segment").val();
			var start_node = $("#start_node").val();
			var end_node = $("#end_node").val();
			var sequence = $("#sequence").val();
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
			  	data: 	"function_name=insert_segment" + "&administrative_id=" + administrative_id + "&name_segment=" + name_segment + 																																												"&start_node=" + start_node + "&end_node=" + end_node + "&sequence=" + sequence
				
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");					
				} else {
					alert("lỗi");
				}
			});	*/
			//$("#road_street_id").empty();		// xoa het item dropbox
		});

		$("#btn_insert_node").click(function() {
			// ajax insert node
			var node_name = $("#node_name").val();
			if(node_name == " ") {
				node_name = null;
			}
			var lat = $("#latitude_node").val();
			if(lat == " ") {
				lat = null;
			}
			var lng = $("#longitude_node").val();
			if(lng == " ") {
				lng = null;
			}
			var wayset = $("#txt_browse_wayset").val();
			if(wayset == " ") {
				wayset = null;
			}
			var info = $("#info_node").val();
			if(info == " ") {
				info = null;
			}
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
				data: 	"function_name=insert_node" + "&node_name=" + node_name + "&lat=" + lat +
						"&lng=" + lng + "&wayset=" + wayset + "&info=" + info
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");
				} else {
					alert("lỗi");
				}
			});	
		});
		
		$("#btn_update_node").click(function() {
			var node_id_update = $("#node_id_update").val();
			var wayset_update = $("#txt_update_wayset");
			
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
				data: 	"function_name=update_node" + "&node_id_update=" + node_id_update + "&wayset_update=" + wayset_update
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");
				} else {
					alert("lỗi");
				}
			});	
		});
		
		/*$("#btn_insert_crossroad").click(function() {
			// ajax insert topo_segment_detail
			var node_id = $("#node_id").val();
			var crossroad_name = $("#crossroad_name").val();
			var way_set = $("#list_segment_id").val();
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
				data: 	"function_name=insert_crossroad" + "&node_id=" + node_id + 
						"&crossroad_name=" + crossroad_name + "&way_set=" + way_set 
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");
				} else {
					alert("lỗi");
				}
			});	
		});*/

		// check response
		/*callback_testajax = function() {
//			test_callBack++;
//			$("#sp_test_ajax").text(test_callBack);
			if(insert_segment_detail_response != -1 && 
			   update_segment_response != -1 &&
			   insert_point != -1) {
				if(insert_segment_detail_response == 1 &&
				   update_segment_response == 1 && insert_point == 1){
					   alert("insert thành công!");
				} else {
					alert("lỗi rồi!");
				}
			} else {	
				setTimeout('callback_testajax()', 100);
			}
		};*/
		
		$("#btn_import_node").click(function() {
			$("#img_load_node").show();										 
			$.ajax({
				type: 	"POST",
				url : 	"read_xml_ajax.php",
				data: 	"function_name=insert_AllNode"
			}).done(function(msg) {
				$("#img_load_node").hide();
				$("#finish_import_node").text(msg);
			});	
		});
		
		$("#btn_import_way").click(function() {
			$("#img_load_way").show();										 
			$.ajax({
				type: 	"POST",
				url : 	"read_xml_ajax.php",
				data: 	"function_name=insert_AllSegment"
			}).done(function(msg) {
				$("#img_load_way").hide();
				$("#finish_import_way").text(msg);
			});	
		});
		
		$("#btn_start_input").click(function() {
			stt_input_list_point = !stt_input_list_point;
			if(stt_input_list_point) {
				$("#btn_start_input").val("Kết thúc");
			} else {
				$("#btn_start_input").val("Bắt đầu nhập");
			}
		});
		
		$("#btn_get_current_zoom").click(function() {
      		$("#zoom_level").val(zoom_level);
		}); 
				
		$("select[name=node_id_update_name]").change(function() {
			data_response = null;										  
			var segment_id = $("select[name=node_id_update_name]").val();
			$.ajax({
				type: "POST",
				url: "utilities_db.php",
				dataType: 'json',
				data: "function_name=getNodeForSegment&segment_id=" + segment_id,
				success: function(data) {
					data_response = data;
				}
			});	
			callback_getResponse();
			//moveMap(21.003002, 105.861286, zoom_level);
		});		
		
		$("select[name=waysetosm]").change(function() {
			data_response = null;
			$("#sp_loading").show();
			var way_id = $("#waysetosm").val();
			$.ajax({
				type: 	"POST",
				url : 	"get_db_ajax.php",
				dataType: 'json',
				data: 	"function_name=getSegmentDetailByID&way_id=" + way_id,
				success: function(data) {
					data_response = data;
				}
			});	
			callback_getlistnode();
		});
		callback_getlistnode = function() {
			$("svg").remove();
			if(data_response != null) {
				drawPath_Detail(data_response, zoom_level);
				drawBoundary(data_response, zoom_level);
				type_tab = 3;
				$("#sp_loading").hide();
			} else {
				setTimeout('callback_getlistnode()', 100);
			}
		};
		
		$("#btn_draw_all_segment").click(function() {
			data_response_segment = null;
			$("#sp_loading").show();
			$.ajax({
				type: 	"POST",
				url : 	"get_db_ajax.php",
				dataType: 'json',
				data: 	"function_name=getSegment",
				success: function(data) {
					data_response_segment = data;
				}
			});	
			callback_getDataSegment();
		});
		callback_getDataSegment = function() {
			if(data_response_segment != null) {
				$.each(data_response_segment.segment, function() {
					$.ajax({
						type: 	"POST",
						url : 	"get_db_ajax.php",
						dataType: 'json',
						data: 	"function_name=getSegmentDetailByID&way_id=" + this.id,
						success: function(data) {
							drawPath_Detail(data, zoom_level);
						}
					});	
				});
				$("#sp_loading").hide();
			} else {
				setTimeout('callback_getDataSegment()', 100);
			}
		};
		
		$("#btn_update_nodeTo").click(function() {
			$("#load_update_nodeTo").show();
			$.ajax({
				type: 	"POST",
				url : 	"utilities_db.php",
				data: 	"function_name=insertNodeTo"
			}).done(function(msg) {
				$("#load_update_nodeTo").hide();
				$("#finish_update_nodeTo").text(msg);
				stt_update_nodeTo = true;
			});	
			callback_checkfinish_update_nodeTo();
		});
		
		callback_checkfinish_update_nodeTo = function() {
			if(stt_update_nodeTo == false) {
				time++;
				time_process(time);		
				setTimeout('callback_checkfinish_update_nodeTo()', 1000);
			} else {
				time = 0;
			}			
		};
		
		$("#btn_start_node").click(function() {
			stt_click_browse_startnode = true;
			$("#btn_start_node").val('Browsing');
		});
		
		$("#btn_end_node").click(function() {
			stt_click_browse_endnode = true;
			$("#btn_end_node").val('Browsing');
		});
		$("#btn_find_path").click(function() {
			var d = cal_distance(current_start_point, current_end_point);
			alert (d);
		});

		//$("#road_street_id").change(function() {
		//	alert($("#road_street_id").val());
		//});
	}); 	
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="overflow: hidden;">
<div id="wrapper">
    <div align="center"><span id="sp_loading" style="background-color:#FF0; margin-right:50px; display:none;">Loading...</span></div>
    <div id="menu_bar">
        <div class="tabbed_area">  
        	<div id="div_item">
                <ul class="tabs">  
                    <li><a href="#" title="content_1" class="tab active">XML</a></li>  
                    <li><a href="#" title="content_2" class="tab">FindPath</a></li>   
                    <li><a href="#" title="content_3" class="tab">Node</a></li>    
                    <li><a href="#" title="content_4" class="tab">Segmen</a>
                    <div id="div_content" class="scroll">
                        <div id="content_1" class="content" style="background:#000">
                          <div style="margin-bottom:10px;">
                            <label style="margin-bottom::20px; color:#FFF; font-size:18px">Tên và đường dẫn đến file</label>
                            <br />
                            <input type="text" id="path_and_file_name" style="width:300px; height:30px;"/>
                          </div>
                          <div style="margin-bottom:10px;">
                            <input type="button"  id="btn_import_node" value="Import node"/>
                            <img id="img_load_node" src="images/loading.gif" align="absmiddle" alt="Loading..." style="display:none"/>
                            <label id="finish_import_node" style="margin-bottom::20px; color:#FFF; font-size:18px"></label>
                            <br />
                          </div>
                          <div style="margin-bottom:10px;">
                            <input type="button"  id="btn_import_way" value="Import way"/>
                            <img id="img_load_way" src="images/loading.gif" align="absmiddle" alt="Loading..." style="display:none"/>
                            <label id="finish_import_way" style="margin-bottom::20px; color:#FFF; font-size:18px"></label>
                            <br />
                          </div>
                          <div style="margin-bottom:10px;">
                            <input type="button"  id="btn_draw_all_segment" value="Draw All Segment"/>
                            <img id="load_draw" src="images/loading.gif" align="absmiddle" alt="Loading..." style="display:none" />
                            <label id="finish_draw" style="margin-bottom::20px; color:#FFF; font-size:18px"></label>
                            <br />
                          </div>
                          <div style="margin-bottom:10px;">
                            <input type="button"  id="btn_update_nodeTo" value="Update NodeTo"/>
                            <img id="load_update_nodeTo" src="images/loading.gif" align="absmiddle" alt="Loading..." style="display:none" />
                            <label id="finish_update_nodeTo" style="margin-bottom::20px; color:#FFF; font-size:18px"></label>
                            <br />
                          </div>
                          <div style="margin-bottom:20px;">
                          	<b style="color:#F00; font-size:20px">Time: <span id="timedisplay"></span></b>
                          </div>
                        </div>
                        <div id="content_2" class="content">
                          <p style="font-size:20px">Nhập thông tin khu vực</p>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Điểm bắt đầu</label>
                            <br />
                            <input type="text" id="txt_start_node" style="height:30px; width:240px;"/>
                            <input type="button" value="Browse" id="btn_start_node" style="height:35px"/>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Điểm kết thúc</label>
                            <br />
                            <input type="text" id="txt_end_node" style="height:30px; width:240px;"/>
                            <input type="button" value="Browse" id="btn_end_node" style="height:35px"/>
                          </div>      
                          <div style="margin-bottom:20px;" align="center">
                            <input type="button" id="btn_find_path" value="Tìm" style="height:30px; width:100px"/>
                          </div>                    
                        </div>
                        <div id="content_3" class="content">
                          <p style="font-size:20px">Nhập thông tin node</p>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Danh sách node hiện tại</label>
                            <br />
                            <select name="node_id" id="node_id" style="height:30px; width: 285px;">
                              <?php
                                include_once "get_db.php";
                                $result = getNode();
                                while($data = mysql_fetch_array($result)) {
                                    echo "<option value=".$data["id"].">".$data["node_name"]."</option>";
                                }						
                            ?>
                            </select>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Tên</label>
                            <br />
                            <input type="text" id="node_name" style="height:30px; width:285px;"/>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Latitude</label>
                            <br />
                            <input type="text" id="latitude_node" style="height:30px; width:285px;"/>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Logitude</label>
                            <br />
                            <input type="text" id="longitude_node" style="height:30px; width:285px;"/>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Tập đường</label>
                            <br />
                            <input type="text" id="txt_browse_wayset" style="height:30px; width:223px;"/>
                            <input type="button" value="chọn" id="btn_browse_wayset" style="height:35px"/>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Info</label>
                            <br />
                            <input type="text" id="info_node" style="height:30px; width:285px;"/>
                          </div>
                          <div style="margin-bottom:20px;" align="center">
                            <input type="button" id="btn_insert_node" value="Insert" style="height:30px; width:100px"/>
                          </div>
                        </div>
                        <div id="content_4" class="content">
                          <p style="font-size:20px">Nhập thông tin segment</p>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Chọn đường</label>
                            <br />
                            <select id="waysetosm" name="waysetosm" style="height:30px; width: 285px;">
                              <?php
                                include_once "get_db.php";
                                $result = getSegment();	
								while($data = mysql_fetch_array($result)) {
                                    echo "<option value=".$data["id"].">".$data["id"]."</option>";
                                }
                            ?>
                            </select>
                          </div>
                          <!--<div style="margin-bottom:20px;">
                        <label style="margin-right:20px;">Relations</label><br />
                        <select id="relations" name="relations" style="height:30px; width: 285px;">
                            <?php
                                include_once "read_xml.php";
                                getAllRelations();					
                            ?>
                        </select>     	
                    </div>        -->
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Node bắt đầu</label>
                            <br />
                            <select name="start_node" id="start_node" style="height:30px; width: 285px;">
                              <?php
                                include_once "get_db.php";
                                $result = getNode();
                                while($data = mysql_fetch_array($result)) {
                                    echo "<option value=".$data["id"].">".$data["node_name"]."</option>";
                                }						
                            ?>
                            </select>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Node kết thúc</label>
                            <br />
                            <select name="end_node" id="end_node" style="height:30px; width: 285px;">
                              <?php
                                include_once "get_db.php";
                                $result = getNode();
                                while($data = mysql_fetch_array($result)) {
                                    echo "<option value=".$data["id"].">".$data["node_name"]."</option>";
                                }						
                            ?>
                            </select>
                          </div>
                          <div style="margin-bottom:20px;">
                            <label style="margin-right:20px;">Thứ tự segment</label>
                            <br />
                            <input type="text" id="sequence" style="height:30px; width:285px;"/>
                          </div>
                          <div style="margin-bottom:20px;" align="center">
                            <input type="button" id="btn_insert_segment" value="Thêm" style="height:30px; width:100px"/>
                          </div>
                        </div>
                      </div>
                    <a href="#" title="content_4" class="tab">t</a></li>    
                </ul>  
            </div>
        </div>         
    </div>
    <div id="tileContainer"  >
        <div id="dragContainer" style="position: absolute; left: 0px; top: 0px;" z-index="1000">
        	<div id="svgContainer" style="position:absolute; left: 0px; top: 0px" z-index="1">        	</div>        
      	</div>       
    </div>
</div>
<ul id="myMenu" class="contextMenu">
	<li class="edit"><a href="#edit">Edit</a></li>
	<li class="cut separator"><a href="#cut">Cut</a></li>
	<li class="copy"><a href="#copy">Copy</a></li>
	<li class="paste"><a href="#paste">Paste</a></li>
	<li class="delete"><a href="#delete">Delete</a></li>
	<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>	
</body>
</html>
